<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>分类列表</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div class="container">
  <h1 align="center">分类列表</h1>
  <div class="mb-3">
    <!-- 添加一个跳转到图书列表主页的按钮 -->
    <a th:href="@{/books/list}" class="btn btn-primary">
      <i class="fas fa-home"></i> 主页
    </a>
    <a class="btn btn-primary" href="/categories/add">
      <i class="fas fa-plus"></i> 添加分类
    </a>
  </div>
  <table class="table">
    <thead>
    <tr>
      <th>名字</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="category : ${categories}">
      <td th:text="${category.name}"></td>
      <td>
        <a class="btn btn-primary" th:href="@{/categories/edit/{id}(id=${category.id})}">
          <i class="fas fa-edit"></i> 编辑
        </a>
        <a class="btn btn-danger" th:href="@{/categories/delete/{id}(id=${category.id})}">
          <i class="fas fa-trash"></i> 删除
        </a>
        <a class="btn btn-secondary" th:href="@{/categories/{categoryId}/books(categoryId=${category.id})}">
          <i class="fas fa-book"></i> 书籍
        </a>
      </td>
    </tr>
    </tbody>
  </table>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>